<template>
	<view>
		<view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)">全部</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)">待确定</view>
			<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="changeTab(2)">待收货</view>
			<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="changeTab(3)">已完成</view>
			<view :class="['inv-h',Inv==4?'inv-h-se':'']" @click="changeTab(4)">取消订单</view>
		</view>
		<!-- 内容 -->
		<view class="swiper-content">
			<view v-if="Inv==Inv" class="content style-default">
				<goods-order :list="tlist" :types="Inv" class="item"></goods-order>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsOrder from "@/components/good-order/good-order.vue"
	export default {
		components: {
			goodsOrder
		},
		data() {
			return {
				Inv: 0,
				list: [], //真正的列表数据
				tlist: [], //处理的页面展示数据
				user: {}
			}
		},
		async onLoad() {
			await this.getList(),
				this.getUser()
		},
		onReady() {

		},
		async onShow() {
			await this.getList()
		},
		methods: {
			getUser() {
				try {
					this.user = uni.getStorageSync('user');
				} catch (e) {
					// error
				}

			},
			getList() {
				this.user = uni.getStorageSync('user');
				let that = this
				let res = uni.request({
					url: that.serverUrl + `/orders/test`,
					method: "GET",
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						userId: that.user.id
					},
					success: (res) => {

						console.log(res)
						this.list = res.data
						// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
						this.list.forEach(el => el.isChecked = false);
						this.tlist = this.list; //真实数据赋值给页面数据
					}
				})


			},
			changeTab(Inv) {
				var that = this;
				that.Inv = Inv;
				console.log(that.Inv)
				var arr = [];
				that.list.map(item => { //遍历真实数据，拿到所需要的数据放在页面数据tlist中，展示在页面上
					if (item.state == Inv) {
						arr.push(item);
					}
				})
				that.tlist = arr;
				if (Inv == 0) { //获取全部数据
					that.tlist = that.list;
				}
				//滚动到顶部
				uni.pageScrollTo({
					duration: 0, //过渡时间必须为0，否则运行到手机会报错
					scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
				})
			},
		}
	}
</script>

<style lang="scss">
	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
		position: fixed;
		top: 0;
		width: 100%;
	}

	.inv-h {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
	}

	.inv-h-se {
		color: #FF9014;
		font-weight: bold;
		border-bottom: 6rpx solid #FF9014;
	}

	.swiper-content {
		margin-top: 130rpx;

		.content {
			width: 670rpx;
			margin: 0 auto 60rpx;
		}
	}
</style>